<template>
  <div>
    <ul class="list">
      <li v-for="(item, index) in list" :key="index">
        <div class="listTop">
          <div class="orderNo">
            <span style="color: #fc9e76;" class="details" @click="gotoDetails(item.orderNo)">订单编号：{{ item.orderNo }}</span>
          </div>
          <div class="orderTime">
            <span>工单编号：{{ item.workOrderNo }}</span>
          </div>
          <div class="serveTime">
            <span>预约时间：{{ item.serviceStartTime }}</span>
          </div>
          <div style="color: #fc9e76;" class="details" @click="amend(item.workOrderNo, item.merchantRemark)">
            查看/修改备注
          </div>
          <div style="color: #fc9e76;" class="details" @click="gotoDetail(item.workOrderNo)">
            查看工单详情
          </div>
        </div>

        <div class="listBottom">
          <div style="vertical-align: middle;width:130px;">
            <img :src="item.attachUrl" alt="" style="width:70px;height:45px;" />
            <p>
              {{ item.goodsTitle }}
            </p>
          </div>
          <div style="width:130px;">
            {{
              item.orderItemType == 0
                ? "单项商品"
                : item.orderItemType == 1
                ? "保洁体验卡"
                : item.orderItemType == 2
                ? "家务师体验卡"
                : item.orderItemType == 3
                ? "保洁周期卡"
                : item.orderItemType == 4
                ? "家务师周期卡"
                : item.orderItemType == null
                ? "无"
                : item.orderItemType
            }}
          </div>
          <!-- <div style="vertical-align: middle;width:130px;">
            {{ item.goodsTitle }}
          </div> -->
          <!-- <div style="width:130px;">{{item.receiverCity}}/{{ item.businessAreaName }}</div> -->
          <!-- <div class="orderMoney">￥{{ item.totalDiscountAmount}}</div> -->
          <div style="width:130px;">{{ item.staffCode }}</div>
          <div style="width:130px;">{{ item.staffName }}</div>
          <div style="width:130px;">{{ item.phone }}</div>
          <div style="width:130px;">{{ item.address }}</div>
          <!-- 工单状态 -->
          <div style="width:130px;" v-if="item.isHangUp === false && item.attachStatus === 0">
            <div class="orderStatus">
              {{ WorkOrderStatusOptions[item.orderStatus] }}
            </div>
            <el-button size="mini" @click="complete(item.workOrderNo, item.orderStatus)" v-if="
                item.orderStatus == '1' ||
                  item.orderStatus == '2' ||
                  item.orderStatus == '3'
              ">完成</el-button>
            <div style="display:flex;margin-top:5px;justify-content: space-around;">
              <el-button style="width:60px;padding: 7px 6px;" slot="reference" size="mini" @click="computer(item)" v-if="item.orderStatus == '1'">自动转单</el-button>
              <el-button style="width:60px;padding: 7px 6px;" size="mini" @click="send(item)" v-if="item.orderStatus == '1'">手动转单</el-button>
            </div>
          </div>
          <!-- 附加状态 -->
          <div style="width:130px;" v-if="item.isHangUp === false && item.attachStatus > 0">
            <div class="orderStatus">
              {{ WorkattachStatus[item.attachStatus] }}
            </div>
            <el-button size="mini" @click="complete(item.workOrderNo, item.orderStatus)" v-if="item.attachStatus == '1' || item.attachStatus == '2'">完成</el-button>
          </div>
          <!-- 已挂起状态 -->
          <div class="six" v-if="item.isHangUp === true">
            <div style="display:flex;flex-direction: row;align-items: center;margin-bottom:3px;">
              <img src="./2.png" style="width:10px;margin-right:8px;" />
              <div style="color:#ff014e;">已挂起</div>
            </div>
            <el-button size="mini" @click="send(item)">手动派单</el-button>
          </div>
        </div>
      </li>
    </ul>

    <!-- 暂无数据 -->
    <div class="nomessage" v-if="list.length == 0">暂无数据</div>

    <!-- 派单 -->
    <el-dialog class="sander" :visible.sync="centerDialogVisible" width="80%" @close="closeDialog">
      <Manually :serviceStartTime="serviceStartTime" :orderItemType="orderItemType" :workOrderNos="workOrderNos"></Manually>
    </el-dialog>

    <!-- 转单dialog -->
    <el-dialog width="30%" title="确认转单" :visible.sync="transferdialogVisible">
      <span>确定要进行转单吗？</span>
      <span slot="footer">
        <el-button @click="transferdialogVisible = false">取 消</el-button>
        <el-button style="background-color:#fd804c;color: #fff;" @click="tanser()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看/修改备注dialog -->
    <el-dialog width="30%" title="添加/修改备注" :visible.sync="modifydialogVisible">
      <el-input type="textarea" :rows="5" placeholder="请输入备注内容" v-model="textarea">
      </el-input>
      <span slot="footer">
        <el-button @click="modifydialogVisible = false">取 消</el-button>
        <el-button style="background-color:#fd804c;color: #fff;" @click="modifydialog">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 完成dialog -->
    <el-dialog width="30%" title="完成工单" :visible.sync="completedialogVisible">
      <span>员工未在前台确认流程，是否确认完成工单？</span>
      <span slot="footer">
        <el-button @click="completedialogVisible = false">取 消</el-button>
        <el-button style="background-color:#fd804c;color: #fff;" @click="completedialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Manually from "./Manually.vue";
import moment from "moment";
export default {
  props: ["list", "currentPage", "times"],
  components: { Manually },
  data () {
    const WorkOrderStatusOptions = {
      "1": "待上门",
      "2": "待服务",
      "3": "服务中",
      "4": "已完成",
      "5": "已取消"
    };
    const WorkattachStatus = {
      "0": "",
      "1": "已迟到",
      "2": "已超时"
    };
    return {
      modifydialogVisible: false,
      transferdialogVisible: false,
      completedialogVisible: false,
      transferdialog: false,
      centerDialogVisible: false,
      textarea: "",
      WorkOrderStatusOptions,
      WorkattachStatus,
      visible: false,
      workOrderNo: "",
      currentOrderstatus: "",
      workOrderNos: "",
      serviceStartTime: "",
      orderItemType: ''
    };
  },
  methods: {
    //派单
    send (item) {
      console.log(item)
      this.centerDialogVisible = true;
      this.workOrderNos = item.workOrderNo;
      this.orderItemType = item.orderItemType
      this.serviceStartTime = item.serviceStartTime;
    },
    //关闭弹框的事件
    closeDialog () {
      location.reload();
    },
    //转单dialog
    tanser () {
      this.transferdialogVisible = false;
      this.$http({
        url: "/hssorderadmin/order/memOrder/transferWorkOrder",
        method: "POST",
        data: {
          workOrderNo: this.workOrderNo
        }
      }).then(res => {
        if (res.success === 1) {
          //转单成功
          this.$alert("已成功转单", "转单成功", {
            showConfirmButton: false
          });
          window.location.reload();
        } else {
          //转单失败
          this.$confirm(
            "当前没有符合要求的员工可接单，是否挂起？",
            "转单失败",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消"
            }
          ).then(() => {
            this.$http({
              url: "/hssorderadmin/order/memOrder/mgrHangUpService",
              method: "get",
              params: {
                workOrderNo: this.workOrderNo
              }
            }).then(res => {
              if (res.success === 1) {
                this.$message.success("订单挂起成功");
                window.location.reload();
              } else {
                this.$message.success("订单挂起失败");
              }
            });
          });
        }
        //console.log(res, "转单");
      });
    },
    computer (item) {
      this.transferdialogVisible = true;
      this.workOrderNo = item.workOrderNo;
    },
    //完成
    complete (workOrderNo, orderStatus) {
      this.completedialogVisible = true;
      this.workOrderNo = workOrderNo;
      this.currentOrderstatus = orderStatus;
      //console.log(workOrderNo, orderStatus);
    },
    completedialog () {
      this.completedialogVisible = false;
      this.$http({
        url: "/hssorderadmin/order/memOrder/mgrCompleteService",
        method: "get",
        params: {
          workOrderNo: this.workOrderNo
        }
      }).then(res => {
        if (res) {
          //  刷新页面
          this.$router.go(0);
        }
      });
    },
    // 查看/修改备注
    amend (workOrderNo, merchantRemark) {
      this.modifydialogVisible = true;
      this.workOrderNo = workOrderNo;
      this.textarea = merchantRemark;
    },
    modifydialog () {
      this.modifydialogVisible = false;
      this.$http({
        url: "/hssorderadmin/order/memOrder/updateRemark",
        method: "get",
        params: {
          remark: this.textarea,
          workOrderNo: this.workOrderNo
        }
      }).then(res => {
        //console.log(res, "查看/修改备注");
      });
    },
    //跳转订单详情
    gotoDetails (orderNo) {
      this.$router.push({
        path: "/orderdetails",
        query: {
          orderNo: orderNo
        }
      });
    },
    //跳转工单详情
    gotoDetail (workOrderNo) {
      this.$router.push({
        path: "/workorderdetails",
        query: {
          workOrderNo
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  margin-top: 12px;
  background-color: #ebeef1;
  font-size: 14px;
  padding-bottom: 12px;
}
li {
  background-color: #fff;
  margin-top: 12px;
  padding-left: 18px;
  font-size: 14px;

  .listTop {
    padding-right: 25px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);

    .checkBox {
      position: absolute;
      left: 34px;
      top: 16px;
    }

    .orderNo {
      min-width: 150px;
    }

    .orderTime {
      min-width: 150px;
    }

    .serveTime {
      min-width: 150px;
    }

    .details {
      cursor: pointer;
    }
  }

  .listBottom {
    text-align: center;
    height: 120px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      text-align: center;
    }
  }
}
.orderStatus {
  margin-bottom: 10px;
}
.six {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nomessage {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  background-color: #fff;
}
.el-button {
  border-color: #4887bd;
  color: #4887bd;
}
.sander {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
  }
  span {
    margin-right: 50px;
    font-size: 16px;
  }
}
</style>
